import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';
import { Link } from 'dva/router';
import { Menu, Icon, Switch } from 'antd';
const SubMenu = Menu.SubMenu;
class Sider extends React.Component {
  state = {
    theme: 'dark',
    current: '1',
  }
  changeTheme = (value) => {
    this.setState({
      theme: value ? 'dark' : 'light',
    });
  }
  handleClick = (e) => {
    this.setState({
      current: e.key,
    });
  }
  render() {
    return (
      <div>
        <Switch
          checked={this.state.theme === 'dark'}
          onChange={this.changeTheme}
          checkedChildren="Dark"
          unCheckedChildren="Light"
        />
        <br />
        <br />
        <Menu
          theme={this.state.theme}
          onClick={this.handleClick}
          style={{ width: 240 }}
          defaultOpenKeys={['sub1']}
          selectedKeys={[this.state.current]}
          mode="inline"
        >
          <SubMenu key="sub1" title={<span><Icon type="mail" /><span>警告提示</span></span>}>
            <Menu.Item key="1"><Link to='alert'>VtxAlert</Link></Menu.Item>
          </SubMenu>
          <SubMenu key="sub2" title={<span><Icon type="appstore" /><span>全局展示操作反馈信息</span></span>}>
            <Menu.Item key="5"><Link to='message'>VtxMessage</Link></Menu.Item>
          </SubMenu>
          <SubMenu key="sub3" title={<span><Icon type="setting" /><span>全局展示通知提醒信息</span></span>}>
            <Menu.Item key="9"><Link to='notification'>VtxNotification</Link></Menu.Item>
          </SubMenu>
          <SubMenu key="sub4" title={<span><Icon type="setting" /><span>气泡提示框</span></span>}>
            <Menu.Item key="11"><Link to='popconfirm'>VtxPopconfirm</Link></Menu.Item>
          </SubMenu>
          <SubMenu key="sub5" title={<span><Icon type="setting" /><span>右侧浮标</span></span>}>
            <Menu.Item key="13"><Link to='righttool'>VtxRightTool</Link></Menu.Item>
          </SubMenu>
        </Menu>
      </div>
    );
  }
}
Sider.propTypes = {
};

export default connect()(Sider);
